@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900);
@import "~compass-mixins";

$color_price_plan_start: #3c224c;
$color_price_plan_end: #201e22;
$color_price_plan_light: #cfbbd9;

.price-plan-layout {
  background-color: rgb(33, 31, 35);
  background-repeat: no-repeat;
  @include filter-gradient($color_price_plan_start, $color_price_plan_end, horizontal);
  @include background-image(radial-gradient(circle at top, $color_price_plan_start 0%, rgba(32, 30, 34, 1) 70%));
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 100%;
  min-height: 100%;
  line-height: 1.5;
  padding: 2.5em;


  h2, h3, p, ul {
    margin: 0
  }

  h2 {
    font-size: 1em;
    font-weight: 400;
    margin: 0 0 0.5em;
  }

  h3 {
    font-size: 1.5em;
    letter-spacing: 0.0625em;
    margin: 0 0 0.3333333333333333em;
  }

  p {
    font-size: 0.875em;
  }

  p, ul {
    margin: 0 0 1.5em
  }

  ul {
    color: #796583;
    font-size: 0.75em;
    list-style-type: none;
    padding: 0;

    li {
      margin: 0 0 0.8333333333333333em;
    }
  }


  .uppercase, .enter_deal_button, h2 {
    text-transform: uppercase;
  }

  sup, .small {
    font-size: 0.6125em;
  }

  .reset-button {
    display: block;
    margin: 10px auto;
    border: none;
    border-radius: 3px;
    padding: 10px 30px;
    font-size: 18px;
    //color: rgba(black, 0.8);
    // transition: color 0.1s ease-in;

    &:hover,
    &:focus {
      cursor: pointer;
      // color: rgba(black, 0.5)
    }
  }


  .enter_deal_button {
    @extend .reset-button;
    background-color: #9c83aa;
    border-radius: 5px;
    color: #fff;
    font-size: 1em;
    font-weight: 700;
    padding: 0.75em 1.5em;
    position: absolute;
    bottom: 1.25em;
    left: 50%;
    margin-left: -60px;
    text-decoration: none;
    width: 120px;
  }

  .container {
    margin: 0 auto;
    width: 90%;
    max-width: 800px;
  }

  .group:after {
    content: "";
    display: table;
    clear: both;
  }

  .grid-1-5 {
    border: 2px solid #5d4e65;
    min-height: 400px;
    padding: 1.25em;
    position: relative;
    text-align: center;
    transition: all .2s ease-in-out;

    @media screen and (min-width: 700px) {
      & {
        float: left;
        width: 50%;
      }
      &:nth-child(odd) {
        clear: left;
      }
    }

    @media screen and (min-width: 800px) {
      & {
        width: 33.0%;
      }
      &:nth-child(3n+1) {
        clear: left;
      }
      &:nth-child(odd) {
        clear: none;
      }
    }

    @media screen and (min-width: 1120px) {
      & {
        width: 20%;
      }
      &:nth-child(odd), &:nth-child(3n+1) {
        clear: none;
      }
    }

    .bullet-content {
      transition: color 0.1s ease-in;
    }
  }

  .grid-1-5:hover {
    background-color: rgb(29, 43, 26);
    @include filter-gradient($color_price_plan_start, $color_price_plan_end, vertical);
    @include background-image(linear-gradient(top, $color_price_plan_start 0%, rgba(32, 29, 34, 1) 100%));
    border-top: 2px solid #ec7a37;
    border-bottom: 2px solid #ff4f69;
    box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 1);
    transform: scale(1.025);
    z-index: 2;


    &:before, &:after {
      content: "";
      position: absolute;
      background-color: rgb(246, 125, 53);
      @include filter-gradient(#f67d35, #ff4f68, vertical);
      @include background-image(linear-gradient(top, rgba(246, 125, 53, 1) 0%, rgba(255, 79, 104, 1) 100%));
      top: -2px;
      bottom: -2px;
      width: 2px;
    }

    &:before {
      left: -2px;
    }

    &:after {
      right: -2px;
    }

    .bullet-content {
      color: $color_price_plan_light;

    }

    .enter_deal_button {
      background-color: rgb(238, 122, 54);
      @include filter-gradient(#ee7a36, #eb495d, horizontal);
      @include background-image(linear-gradient(left, rgba(238, 122, 54, 1) 0%, rgba(235, 73, 93, 1) 100%));
    }
  }
}
